<template>
  <div class="view-container">

    <div class="main-content">

      <div class="list-container">
        <formNavi @change="change" />
        <table-view :data="tableData" header-cell-class-name="table-header" size="medium">
          <el-table-column prop="timeCycle" label="时间周期" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="total" label="总数量" align="center" :show-overflow-tooltip="true">
            <template #default="{row}">
              {{ row.firstTerminalTotal + row.secondTerminalTotal + row.thirdTerminalTotal }}
            </template>
          </el-table-column>
          <el-table-column prop="firstTerminalTotal" label="第1终端数量" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="secondTerminalTotal" label="第2终端数量" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="thirdTerminalTotal" label="第3终端数量" align="center" :show-overflow-tooltip="true" />

        </table-view>
      </div>

    </div>

  </div>

</template>

<script>
import {defineAsyncComponent, getCurrentInstance, inject, onMounted, reactive, toRefs,} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default {
    name: 'Index',
    components: {
      formNavi: defineAsyncComponent(() => import('./modules/form.vue')),
    },
    setup(props, context) {
      const api = inject('api')
      const router = useRouter()
      const route = useRoute()
      const currentInstance = getCurrentInstance()

      var data = reactive({
        activeName: route.query.tab || 'time',
        componentTabs: null,
        queryParams: {
          cycle: '1', // 统计周期 1 天 2 周 3 月 4 季度 5 年 6 自定义
          progress: '1', // 开发进度 1 新注册终端 2 待进货终端 3 正式交易终端
          start: new Date(), //
          end: new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 6), //	string
          productId: 0,
        },
        tableData: [],
      })

      const change = (val) => {
        data.queryParams = val
        handlList()
      }

      const handlList = async () => {
        const res = await api.developCustomer.CUSTOMER(data.queryParams)
        if (res.code === 0) {
          data.tableData = res.data.list
        }
      }

      onMounted(() => {
        handlList()
      })

      return {
        ...toRefs(data),
        handlList,
        change,
      }
    },
  }
</script>

<style scoped>
</style>